<!-- 组建必须创建在components文件夹下，创建组建，在pages调用时不需要引入 -->
<template>
	<!-- 轮播图参数详见文档 -->
	<swiper class="swiperLayout" indicator-dots circular autoplay interval="10000" duration="5000">
		<!-- 列表渲染，循环遍历展示所有图 -->
		<swiper-item class="swiper" v-for="item in props.pictureUrl" :key="item.id">
			<!-- 图像的展示详见文档，点击事件可以直接传参 :src等效v-bind:-->
			<image class="image" mode="aspectFill" @tap="onPreviewImage(item.url)" :src="item.url"></image>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
	/**
	 * 点击事件的方法,点击放大
	 */
	function onPreviewImage(url : string) {
		uni.previewImage({
			urls: props.pictureUrl.map((item : Picture) => item.url), // 用map方法获得一个list
			current: url
		})
	}

	/**
	 * 约束父子传值的数据类型
	 */
	type Picture = {
		id : number
		url : string
	}
	/**
	 * 接收父组件传值
	 * 约束类型,并设定初始值
	 */
	const props = defineProps({
		pictureUrl: {
			type: Array<Picture>,
			default: [{
				id: '1',
				url: "https://www.songtx.cn/image/1.jpeg"
			}]
		}
	})
</script>

<style lang="scss" scoped>
	.swiperLayout {
		width: 750rpx;
		height: 420rpx;

		.swiper {
			.image {
				width: 750rpx;
				height: 420rpx;
			}
		}
	}
</style>